Revision:
<button id="js-toggle" class="btn" type="button">Toggle animations</button>
<div class="circle a-slide" data-animation="stop">I will play/pause</div>
<div class="circle a-slide" data-animation="once" style="--bgc:tomato;--animdel:250ms;">I will play/pause</div>
<div class="circle a-slide" data-animation="slow" style="--bgc:tan;--animdel:500ms;">I will play/pause</div>
<div class="circle a-slide" data-animation style="--bgc:orange;--animdel:750ms;">I will play/pause</div>
<div class="circle a-pulse" data-animation="alternate" style="--bgc:purple;">I will play/pause</div>
<style>
.btn {background-color: burlywood; border: 0 ;border-radius: 1vw; color: blue; display: inline-block; margin-block-end: 1vw; padding: 1vw; cursor: pointer; top: 0;}
.circle {--bgc: cornflowerblue; --w: 8.5vw; align-items: center; background-color: var(--bgc); border-radius: 50%; color: #FFF; display: flex; height: var(--w); justify-content: center; margin-bottom: 1vw;
width: var(--w); }
.a-pulse {--animdur: 2s; will-change: transform;--animn: pulse;}
.a-slide {--animdur: 3s; --animn: slide; }
[data-animation] { animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running);}
/* KEYFRAMES */
@keyframes pulse {
0% {transform: scale(1);}
25% {transform: scale(.9);}
50% {transform: scale(1);}
75% {transform: scale(1.1);}
100% {transform: scale(1);}
}
@keyframes slide {
from { margin-left: 0%; }
to { margin-left: calc(100% - var(--w, 9vw)); }
}
</style>
<script>
/* Toggle Animations */
const jstoggle = document.getElementById('js-toggle');
jstoggle.addEventListener('click', () => {
const animations = document.querySelectorAll('[data-animation]');
animations.forEach(animation => {
const running = animation.style.animationPlayState || 'running';
animation.style.animationPlayState = running === 'running' ? 'paused' : 'running';
})
});
</script>
<input type="checkbox" data-animation-pause id="css-toggle" class="hidden" />
<label for="css-toggle" class="chk">Toggle animation-duration (0 to 3s)</label>
<div class="circle_a aa-slide" data-animation_a="stop">I will play/pause</div>
<div class="circle_a aa-slide" data-animation_a="once" style="--bgc:tomato;--animdel:250ms;">I will play/pause</div>
<div class="circle_a aa-slide" data-animation_a="slow" style="--bgc:tan;--animdel:500ms;">I will play/pause</div>
<div class="circle_a aa-slide" data-animation_a style="--bgc:orange;--animdel:750ms;">I will play/pause</div>
<div class="circle_a aa-pulse" data-animation_a="alternate" style="--bgc:purple;">I will play/pause</div>
<style>
.chk { align-items: center; cursor: pointer; display: inline-flex; user-select: none;}
.chk::before {--ico-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14 2.5l-8.5 8.5-3.5-3.5-1.5 1.5 5 5 10-10z"
fill="white"></path></svg>'); background: silver var(--ico-check) center center/70% no-repeat; border-radius: 0.25rem;
display: inline-block; content: ''; height: 1.25rem; margin-inline-end: 0.25rem; width: 1.25rem;}
.hidden {clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: inset(1px) display: block; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}
.circle_a {--bgc: cornflowerblue; --w: 9vw; align-items: center; background-color: var(--bgc); border-radius: 50%; color: #FFF; display: flex; height: var(--w); justify-content: center; margin-bottom: 1rem;
width: var(--w); }
.aa-pulse {--animdur: 0s;--animn: pulse_b; will-change: transform;}
.aa-slide {--animdur: 0s;--animn: slide_b;}
[data-animation_a] {animation: var(--animn, none) var(--animdur, 0s) var(--animtf, linear) var(--animdel, 0s) var(--animic, infinite) var(--animdir, alternate) var(--animfm, none) var(--animps, running);}
/* STATE */
[data-animation-pause]:checked ~ [data-animation_a] {--animdur: 3s; }
[data-animation-pause]:checked + label::before {background-color: cornflowerblue;}
/* KEYFRAMES */
@keyframes opacity {
0% {opacity: 1;}
50% {opacity: 0.6;}
100% {opacity: 1;}
}
@keyframes pulse_b {
0% {transform: scale(1);}
25% {transform: scale(.9);}
50% {transform: scale(1);}
75% {transform: scale(1.1);}
100% {transform: scale(1);}
}
@keyframes slide_b {
from { margin-left: 0%; }
to { margin-left: calc(100% - var(--w, 9vw)); }
}
</style>